<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="description" content="Bootstrap 4 HTML5 Multi Purpose One/Multi Pages Template">
    <meta name="keywords" content="bootstrap, responsive, multipurpose, business, corporate, product, product launch, creative, landing page, marketing, software">
    <meta name="author" content="setblue">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title -->
    <title>itotek | Bootstrap 4 HTML5 Multi Purpose One/Multi Pages Template</title>



    <!-- Animate CSS -->
    <link rel="stylesheet" href="static/css/animate.css">

    <!-- Slick CSS -->
    <link rel="stylesheet" href="static/css/slick.css">

    <!-- Google Fonts -->
    <link rel="stylesheet" href="static/css/css.css" type="text/css">

    <!-- Line Icons CSS -->
    <link rel="stylesheet" href="static/css/LineIcons.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">

    <!-- Magnific Popup -->
    <link href="static/css/magnific-popup.css" rel="stylesheet">

    <!-- Style CSS -->
    <link rel="stylesheet" href="static/css/style.css">

    <!-- Style CSS -->
    <link rel="stylesheet" href="static/css/video-modal.css">

</head>

<body>
    <!-- Preloader Start -->
    <div class="spinner-wrapper">
        <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>
    <!-- Preloader Ends -->
    <!-- Navbar Start -->
    <div class="navbar-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- navbar -->
                    <nav class="navbar navbar-expand-lg">
                        <a class="navbar-brand" href="index1.html">
                            <img src="static/picture/logo.svg" alt="Logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTwo" aria-controls="navbarTwo" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse sub-menu-bar" id="navbarTwo">
                            <ul class="navbar-nav m-auto">
                                <li class="nav-item"><a href="index1.html">home</a></li>
                                <li class="nav-item"><a href="services.html">Services</a></li>
                                <li class="nav-item"><a href="aboutus.html">About Us</a></li>
                                <li class="nav-item"><a href="pricing.html">Pricing</a></li>
                                <li class="nav-item active"><a href="portfolio.html">portfolio</a></li>
                                <li class="nav-item"><a href="faq.html">FAQ's</a></li>
                                <li class="nav-item"><a href="contactus.html">Contact Us</a></li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Pages.
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="404.html">404</a>
                                        <a class="dropdown-item" href="blog.html">Blog</a>
                                        <a class="dropdown-item" href="login.html">Login</a>
                                        <a class="dropdown-item" href="register.html">Register</a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="navbar-btn d-none d-sm-inline-block">
                            <ul>
                                <li><a class="solid" href="#">Download</a></li>
                            </ul>
                        </div>
                    </nav> 
                    <!-- navbar -->
                </div>
            </div>
        </div> <!-- container -->
    </div>
    <!-- Navbar Ends -->
    <!-- Inner Banner Start -->
    <section class="inner-banner">
        <div class="inner-text">
            <h1>Portfolio</h1>
            <nav aria-label="breadcrumb" class="sticky-header">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index1.html">Home</a></li>
                    <li class="breadcrumb-item active">Portfolio</li>
                </ol>
            </nav>
        </div>
        <div id="particles-1" class="particles"></div>
    </section>
    <!-- Inner Banner Ends -->
   
   <!-- Portfolio Start -->
    <section class="section portfolio-section">
        <div class="container">
            <div class="d-flex justify-content-center">
                <!--   Portfolio Filters   -->
                <ul id="portfolio-filter" class="portfolio-filter filters">
                    <li class="button-border list-inline-item">
                        <a href="#" data-filter="*" class="pill-button active">All</a>
                    </li>
                    <li class="button-border list-inline-item">
                        <a href="#" data-filter=".webdesign" class="pill-button">Web Design</a>
                    </li>
                    <li class="button-border list-inline-item">
                        <a href="#" data-filter=".mobiledesign" class="pill-button">Mobile Design</a>
                    </li>
                    <li class="button-border list-inline-item">
                        <a href="#" data-filter=".seo" class="pill-button">Seo</a>
                    </li>
                    <li class="button-border list-inline-item">
                        <a href="#" data-filter=".graphic" class="pill-button">Graphic</a>
                    </li>
                </ul>
            </div>
            <div class="portfolio-items row">
                <!-- Item 01 -->
                <div class="col-lg-4 col-sm-6 portfolio-item seo">
                    <div class="image-border">
                        <div class="portfolio-box">
                            <a href="javascript:;" data-youtube-id="hrB-_nIer88" class="video-thumb js-trigger-video-modal">
                                <img src="static/picture/01.jpg" class="img-fluid" alt="">
                                <div class="img-overlay text-center">
                                    My Work
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- Item 02 -->
                <div class="col-lg-4 col-sm-6 portfolio-item graphic webdesign">
                    <div class="image-border">
                        <div class="portfolio-box">
                            <a href="javascript:;" data-youtube-id="hrB-_nIer88" class="video-thumb js-trigger-video-modal">
                                <img src="static/picture/02.jpg" class="img-fluid" alt="">
                                <div class="img-overlay text-center">
                                    My Work
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Item 03 -->
                <div class="col-lg-4 col-sm-6 portfolio-item webdesign graphic">
                    <div class="image-border">
                        <div class="portfolio-box">
                            <a href="javascript:;" data-youtube-id="hrB-_nIer88" class="video-thumb js-trigger-video-modal">
                                <img src="static/picture/03.jpg" class="img-fluid" alt="">
                                <div class="img-overlay text-center">
                                    My Work
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Item 04 -->
                <div class="col-lg-4 col-sm-6 portfolio-item mobiledesign webdesign">
                    <div class="image-border">
                        <div class="portfolio-box">
                            <a href="javascript:;" data-youtube-id="hrB-_nIer88" class="video-thumb js-trigger-video-modal">
                                <img src="static/picture/04.jpg" class="img-fluid" alt="">
                                <div class="img-overlay text-center">
                                    My Work
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Item 05 -->
                <div class="col-lg-4 col-sm-6 portfolio-item mobiledesign seo">
                    <div class="image-border">
                        <div class="portfolio-box">
                            <a href="javascript:;" data-youtube-id="hrB-_nIer88" class="video-thumb js-trigger-video-modal">
                                <img src="static/picture/05.jpg" class="img-fluid" alt="">
                                <div class="img-overlay text-center">
                                    My Work
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Item 06 -->
                <div class="col-lg-4 col-sm-6 portfolio-item mobiledesign">
                    <div class="image-border">
                        <div class="portfolio-box">
                            <a href="javascript:;" data-youtube-id="hrB-_nIer88" class="video-thumb js-trigger-video-modal">
                                <img src="static/picture/06.jpg" class="img-fluid" alt="">
                                <div class="img-overlay text-center">
                                    My Work
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Item 07 -->
                <div class="col-lg-4 col-sm-6 portfolio-item mobiledesign webdesign">
                    <div class="image-border">
                        <div class="portfolio-box">
                            <a href="javascript:;" data-youtube-id="hrB-_nIer88" class="video-thumb js-trigger-video-modal">
                                <img src="static/picture/07.jpg" class="img-fluid" alt="">
                                <div class="img-overlay text-center">
                                    My Work
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
               
                <!-- Item 08 -->
                <div class="col-lg-4 col-sm-6 portfolio-item webdesign graphic">
                    <div class="image-border">
                        <div class="portfolio-box">
                            <a href="javascript:;" data-youtube-id="hrB-_nIer88" class="video-thumb js-trigger-video-modal">
                                <img src="static/picture/08.jpg" class="img-fluid" alt="">
                                <div class="img-overlay text-center">
                                    My Work
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Item 09 -->
                <div class="col-lg-4 col-sm-6 portfolio-item seo">
                    <div class="image-border">
                        <div class="portfolio-box">
                            <a href="javascript:;" data-youtube-id="hrB-_nIer88" class="video-thumb js-trigger-video-modal">
                                <img src="static/picture/09.jpg" class="img-fluid" alt="">
                                <div class="img-overlay text-center">
                                    My Work
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </section>
    <!-- Portfolio Ends -->



    <!-- video modal -->
    <section class="video-modal">

        <!-- Modal Content Wrapper -->
        <div id="video-modal-content" class="video-modal-content">

            <!-- iframe -->
            <iframe id="youtube" width="100%" height="100%" frameborder="0" allow="autoplay" allowfullscreen="" src=""></iframe>

            <a href="#" class="close-video-modal">
                <!-- X close video icon -->
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewbox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="24" height="24">
                <g id="icon-x-close">
                <path fill="#ffffff" d="M30.3448276,31.4576271 C29.9059965,31.4572473 29.4852797,31.2855701 29.1751724,30.980339 L0.485517241,2.77694915 C-0.122171278,2.13584324 -0.104240278,1.13679247 0.52607603,0.517159487 C1.15639234,-0.102473494 2.17266813,-0.120100579 2.82482759,0.477288136 L31.5144828,28.680678 C31.9872448,29.1460053 32.1285698,29.8453523 31.8726333,30.4529866 C31.6166968,31.0606209 31.0138299,31.4570487 30.3448276,31.4576271 Z" id="Shape"></path>
                <path fill="#ffffff" d="M1.65517241,31.4576271 C0.986170142,31.4570487 0.383303157,31.0606209 0.127366673,30.4529866 C-0.12856981,29.8453523 0.0127551942,29.1460053 0.485517241,28.680678 L29.1751724,0.477288136 C29.8273319,-0.120100579 30.8436077,-0.102473494 31.473924,0.517159487 C32.1042403,1.13679247 32.1221713,2.13584324 31.5144828,2.77694915 L2.82482759,30.980339 C2.51472031,31.2855701 2.09400353,31.4572473 1.65517241,31.4576271 Z" id="Shape"></path>
            </g>
          </svg>
            </a>

        </div><!-- end modal content wrapper -->
        <!-- clickable overlay element -->
        <div class="overlay"></div>


    </section>
    <!-- end video modal -->

    <!-- Footer Start -->
    <footer class="footer-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="footer-logo text-center">
                        <a href="index.html"><img src="static/picture/logo.svg" alt="Logo"></a>
                    </div>

                    <div class="footer-support text-center mt-4">
                        <span>+8801234567890</span>
                        <span>support@uideck.com</span>
                    </div>

                    <ul class="social text-center mt-4">
                        <li><a href="javascript:;"><i class="lni lni-facebook-filled"></i></a></li>
                        <li><a href="javascript:;"><i class="lni lni-twitter-original"></i></a></li>
                        <li><a href="javascript:;"><i class="lni lni-instagram-original"></i></a></li>
                        <li><a href="#"><i class="lni lni-linkedin-original"></i></a></li>
                    </ul>
                </div>

                <div class="col-lg-12">
                    <div class="copyright text-center mt-4">
                        <p class="text">2020 © itotek. Design by Setblue.</p>
                    </div>
                </div>


            </div>
        </div>
        <div id="particles-2"></div>
    </footer>
    <!-- Footer Ends -->
    <!-- Back Top Top Start -->
    <a href="#" class="back-to-top"><i class="lni lni-chevron-up"></i></a>
    <!-- Back Top Top Ends -->
    <!-- Jquery js -->
    <script src="static/js/jquery-1.12.4.min.js"></script>
    <script src="static/js/modernizr-3.7.1.min.js"></script>

    <!-- Bootstrap js -->
    <script src="static/js/popper.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>

    <!-- Slick js -->
    <script src="static/js/slick.min.js"></script>

    <!-- wow js -->
    <script src="static/js/wow.min.js"></script>

    <!-- Particles js -->
    <script src="static/js/particles.min.js"></script>

    <!-- Main js -->
    <script src="static/js/main.js"></script>

    <script src="static/js/isotope.pkgd.min.js"></script>
    <script src="static/js/jquery.magnific-popup.min.js"></script>


    <!-- Video Modal -->
    <script>
        $(document).ready(function () {


            /* Toggle Video Modal
          -----------------------------------------*/
            function toggle_video_modal() {

                // Click on video thumbnail or link
                $(".js-trigger-video-modal").on("click", function (e) {

                    // prevent default behavior for a-tags, button tags, etc. 
                    e.preventDefault();

                    // Grab the video ID from the element clicked
                    var id = $(this).attr('data-youtube-id');

                    // Autoplay when the modal appears
                    // Note: this is intetnionally disabled on most mobile devices
                    // If critical on mobile, then some alternate method is needed
                    var autoplay = '?autoplay=1';

                    // Don't show the 'Related Videos' view when the video ends
                    var related_no = '&rel=0';

                    // String the ID and param variables together
                    var src = '//www.youtube.com/embed/' + id + autoplay + related_no;

                    // Pass the YouTube video ID into the iframe template...
                    // Set the source on the iframe to match the video ID
                    $("#youtube").attr('src', src);

                    // Add class to the body to visually reveal the modal
                    $("body").addClass("show-video-modal noscroll");

                });

                // Close and Reset the Video Modal
                function close_video_modal() {

                    event.preventDefault();

                    // re-hide the video modal
                    $("body").removeClass("show-video-modal noscroll");

                    // reset the source attribute for the iframe template, kills the video
                    $("#youtube").attr('src', '');

                }
                // if the 'close' button/element, or the overlay are clicked 
                $('body').on('click', '.close-video-modal, .video-modal .overlay', function (event) {

                    // call the close and reset function
                    close_video_modal();

                });
                // if the ESC key is tapped
                $('body').keyup(function (e) {
                    // ESC key maps to keycode `27`
                    if (e.keyCode == 27) {

                        // call the close and reset function
                        close_video_modal();

                    }
                });
            }
            toggle_video_modal();



        });
    </script>

</body>
</html>